<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
		<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
		<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
		<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
		<link href="css/login.css" rel="stylesheet" type="text/css"/>
		<link href="css/index.css" rel="stylesheet" type="text/css"/>
		 
	<body>
		
		<div id="app">
			<div>
				<div class="immersive-content">
					<div class="writer-login">
						<div class="muye-header muye-header--transparent">
							<div class="muye-header-bg">
								<div class="muye-header-content">
									<div class="muye-header-logo">
										<div class="td-header-logo">
											<img src="image/logo.png" />
											<li style="color: white;"> 土豆小说网 </li>
										</div>
										 
									</div>
									<div class="muye-header-content-right">
										<div class="muye-header-login  muye-header-nav">
											<a @click="Jump1()" class="muye-header-nav-item muye-header-light-font" href="/index/login.html#1" >读者登录</a>
											<a @click="Jump2()" class="muye-header-nav-item muye-header-light-font" href="/index/login.html#2">成为作家</a>
											<a @click="Jump3()" class="muye-header-nav-item muye-header-light-font" href="/index/login.html#3">后台登录</a>
											 
										</div>
										<div class="muye-header-user muye-header-light-font"></div>
									</div>
									
								</div>
								
							</div>
							
						</div>
						
						<div class="writer-login__background">
							<video autoplay="" loop="" class="writer-login__background__video" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/gfeeh7pldnupqps/novel/welcome.mp4" poster="https://p6-novel.byteimg.com/img/novel-static/a64043022c1b13a5ad3c782919b6fa00~1920x0.jpeg"></video>
						</div>
						<div class="writer-login__content">
							<div class="writer-login__content__form">
								<div v-if="iflogin1" id="slogin-pc-login-form" class="slogin-pc-login-form">
									<div class="slogin-pc-form-header">
										<div class="slogin-pc-form-header__title">
											<div v-if="!change" class="slogin-pc-form-header__title__tab  ">
												验证码登录
											</div>
											<div v-if="change"  @click="fanhui()" style="cursor: pointer;"  class="slogin-pc-form-header__title__tab  ">
												< 密码登录
											</div>
<!--											<div class="slogin-pc-form-header__title__tab slogin-pc-form-header__title__tab&#45;&#45;dim ">-->
<!--												扫码登录-->
<!--											</div>-->
										</div>
									</div>
									<div class="slogin-pc-login-form__form-container">
										<form style="padding-bottom: 0px;"    class="slogin-pc-form-layout"> 
											 
											     
											<div    style="padding-top: 40px;" class="slogin-pc-form-layout__item">
												 <div class="slogin-form-input">
													 <input type="phone" v-model="phone" @blur="checkPhoneNumber"   placeholder="手机号" class="arco-input arco-input-size-default arco-input-error serial-input" value="" aria-invalid="true">
													 <div v-if="showError"  style="margin-top: 4px;" class="slogin-form-input__error">请输入正确的手机号</div>
												</div>
											</div>

											<div v-if="!change"  style="padding-top: 40px;" class="slogin-pc-form-layout__item">
												<div class="slogin-form-input">
													<input pattern="[0-9]+" v-model="sms" type="text" autocomplete="on" maxlength="4" placeholder="请输入验证码" class="arco-input arco-input-size-default serial-input" value="">
													<div class="slogin-form-input__button-text  " @click="sendSms" >获取验证码</div>
												</div>
											</div>
											<div v-if="change" style="padding-top: 40px;" class="slogin-pc-form-layout__item">
												<div class="slogin-form-input">
													<input pattern="[0-9]+" v-model="password" type="password" autocomplete="on"   placeholder="请输入密码" class="arco-input arco-input-size-default serial-input" value="">
													<div class="slogin-form-input__button-text  " @click="" >忘记密码</div>
												</div>
											</div>
											<div style="padding-top: 40px;" class="slogin-pc-form-layout__item">
												<div class="slogin-form-input">
													<template>
														<!-- `checked` 为 true 或 false -->
														<el-checkbox v-model="checked">我已阅读并同意 用户协议 和 隐私政策</el-checkbox>
													</template>
												</div>
											</div>
											<div style="padding-top: 40px;" class="slogin-pc-form-layout__item">
												<button  v-if="!change"   style="text-align: center; width: 100%;"  @click="login()"    class="arco-btn arco-btn-primary arco-btn-size-large arco-btn-shape-round arco-btn-disabled serial-arco-btn slogin-form-button " type="button"  >
													<span>登录/注册</span>
												</button>
												<button v-if="!change"  @click="pwdlogin()"   style="text-align: center; width: 100%;margin-top: 10px;margin-bottom: 10px; background-color: white;color: orange;"       class="arco-btn arco-btn-primary arco-btn-size-large arco-btn-shape-round   serial-arco-btn slogin-form-button " type="button"  >
													<span>密码登录</span>
												</button>
												<button  v-if="change"   style="text-align: center; width: 100%;"  @click="login()"    class="arco-btn arco-btn-primary arco-btn-size-large arco-btn-shape-round arco-btn-disabled serial-arco-btn slogin-form-button " type="button"  >
													<span>登录</span>
												</button>
											</div>
											 
											 
										
										</form>
										 
										 
									</div>
								</div>
								<div v-if="iflogin2"  id="slogin-pc-login-form" class="slogin-pc-login-form">
									<div class="slogin-pc-form-header">
										<div class="slogin-pc-form-header__title">
											<div class="slogin-pc-form-header__title__tab  ">
												作家登录/注册
											</div>
											<!--											<div class="slogin-pc-form-header__title__tab slogin-pc-form-header__title__tab&#45;&#45;dim ">-->
											<!--												扫码登录-->
											<!--											</div>-->
										</div>
									</div>
									<div class="slogin-pc-login-form__form-container">
										<form style="padding-bottom: 0px;"    class="slogin-pc-form-layout">


											<div style="padding-top: 40px;" class="slogin-pc-form-layout__item">
												<div class="slogin-form-input">
													<input type="phone" v-model="phone" @blur="checkPhoneNumber"   placeholder="手机号" class="arco-input arco-input-size-default arco-input-error serial-input" value="" aria-invalid="true">
													<div v-if="showError"  style="margin-top: 4px;" class="slogin-form-input__error">请输入正确的手机号</div>
												</div>
											</div>

											<div style="padding-top: 40px;" class="slogin-pc-form-layout__item">
												<div class="slogin-form-input">
													<input pattern="[0-9]+" v-model="sms" type="text" autocomplete="on" maxlength="4" placeholder="请输入验证码" class="arco-input arco-input-size-default serial-input" value="">
													<div class="slogin-form-input__button-text  " @click="sendSms" >获取验证码</div>
												</div>
											</div>
											<div style="padding-top: 40px;" class="slogin-pc-form-layout__item">
												<div class="slogin-form-input">
													<template>
														<!-- `checked` 为 true 或 false -->
														<el-checkbox v-model="checked">我已阅读并同意 用户协议 和 隐私政策</el-checkbox>
													</template>
												</div>
											</div>
											<div style="padding-top: 40px;" class="slogin-pc-form-layout__item">
												<button    style="text-align: center; width: 100%;"  @click="authorlogin()"    class="arco-btn arco-btn-primary arco-btn-size-large arco-btn-shape-round arco-btn-disabled serial-arco-btn slogin-form-button " type="button"  >
													<span>登录/注册</span>
												</button>
											</div>



										</form>


									</div>
								</div>
								<div v-if="iflogin3"  id="slogin-pc-login-form" class="slogin-pc-login-form">
									<div class="slogin-pc-form-header">
										<div class="slogin-pc-form-header__title">
											<div class="slogin-pc-form-header__title__tab  ">
												后台登录
											</div>
											<!--											<div class="slogin-pc-form-header__title__tab slogin-pc-form-header__title__tab&#45;&#45;dim ">-->
											<!--												扫码登录-->
											<!--											</div>-->
										</div>
									</div>
									<div class="slogin-pc-login-form__form-container">
										<form style="padding-bottom: 0px;"    class="slogin-pc-form-layout">


											<div    style="padding-top: 40px;" class="slogin-pc-form-layout__item">
												<div class="slogin-form-input">
													<input type="phone" v-model="phone" @blur="checkPhoneNumber"   placeholder="手机号" class="arco-input arco-input-size-default arco-input-error serial-input" value="" aria-invalid="true">
													<div v-if="showError"  style="margin-top: 4px;" class="slogin-form-input__error">请输入正确的手机号</div>
												</div>
											</div>
											<div   style="padding-top: 40px;" class="slogin-pc-form-layout__item">
												<div class="slogin-form-input">
													<input pattern="[0-9]+"  v-model="password" type="password" autocomplete="on"    placeholder="请输入密码" class="arco-input arco-input-size-default serial-input" value="">

													<div class="slogin-form-input__button-text  " @click="" >忘记密码</div>
												</div>
											</div>
											<div style="padding-top: 40px;" class="slogin-pc-form-layout__item">
												<div class="slogin-form-input">
													<template>
														<!-- `checked` 为 true 或 false -->
														<el-checkbox v-model="checked">我已阅读并同意 用户协议 和 隐私政策</el-checkbox>
													</template>
												</div>
											</div>
											<div style="padding-top: 40px;" class="slogin-pc-form-layout__item">

												<button    style="text-align: center; width: 100%;"  @click="adminlogin()"    class="arco-btn arco-btn-primary arco-btn-size-large arco-btn-shape-round arco-btn-disabled serial-arco-btn slogin-form-button " type="button"  >
													<span>登录</span>
												</button>
											</div>



										</form>


									</div>
								</div>
							</div>

							<div class="writer-login__content__footer">
								<div class="simple-footer">
									<div class="footer-explain light-font">© 2024 土豆小说科技有限公司</div>
								</div>
							</div>
						</div>
						
					</div>
					
				</div>
			</div>
		</div>
	</body>
	
	<script>
	
	var v = new Vue({
		el: "#app",
		 data() {

		      return {
				  showError: '',
		         phone: '',
				  checked: true,
				  sms: '',  //用户输入的验证码
				  smsnumber: '1234',  //发送的验证码
				  iflogin1: true,  //选择用户登录
				  iflogin2: false,//选择作者登录
				  iflogin3: false,//选择后台登录
				  xuan: '' , //选择登录类型
				  change: false , //选择密码登录
				  password: '', //密码登录的密码




			  };
		    },

		mounted() {






		},
		    methods: {

		       checkPhoneNumber() {
				  let phonePattern = /^[0-9]{11}$/;
				  if (!this.phone.match(phonePattern)) {
					   this.showError = true;
				  } else {
					  this.showError  = false;
				  }
			  },
				sendSms() {
				   axios.get('/user/sms?phone='+this.phone).then(res => {
					    this.smsnumber = res.data;

				   });

				},
				login() {
				   if(this.change == true){
					   if((this.password != '' || this.password != null) && this.checked){
						   axios.get('/user/pwdlogin?phone='+this.phone+'&password='+this.password).then(res => {
							   if( res.data != null  ){
								   window.location.href = "index.html";
							   }
							   else{
								   alert("登录失败,请检查手机号或密码是否正确！");
							   }

						   });

					   }
					   else{
						   alert("密码为空或未勾选协议！");
					   }

				   }
				   else{
					   if( this.sms == this.smsnumber && this.checked){
						   axios.get('/user/login?phone='+this.phone).then(res => {
							   console.log(res.data);

							   if( res.data != null  ){
								   window.location.href = "index.html";
							   }
							   else{
								   alert("登录失败,请检查手机号或验证码是否正确！");
							   }

						   });
					   }
					   else{
						   alert("验证码错误或未勾选协议！");
					   }

				   }


				},

				authorlogin() {
					if( this.sms == this.smsnumber && this.checked){
						axios.get('/other/author/login?phone='+this.phone).then(res => {
							console.log(res.data);

							if( res.data != null  ){
								window.location.href = "author.html";
							}
							else{
								alert("登录失败,请检查手机号或验证码是否正确！");
							}

						});
					}
					else{
						alert("验证码错误或未勾选协议！");
					}

				},
				Jump1(){
				   window.location.href = "login.html#1";
					// 获取 URL 中的参数值（以 # 号分隔）
					let hashValue = window.location.hash;
					// 去掉 # 号，只保留值部分
					this.xuan  = hashValue.substring(1);

					 if (this.xuan == "1"){
						this.iflogin1= true;
						this.iflogin2= false;
						this.iflogin3= false;

					}

				},
				Jump2(){
					window.location.href = "login.html#2";
					// 获取 URL 中的参数值（以 # 号分隔）
					let hashValue = window.location.hash;
					// 去掉 # 号，只保留值部分
					this.xuan  = hashValue.substring(1);

					if (this.xuan == "2"){
						this.iflogin1= false;
						this.iflogin2= true;
						this.iflogin3= false;

					}
				},
				Jump3(){
					window.location.href = "login.html#3";
					// 获取 URL 中的参数值（以 # 号分隔）
					let hashValue = window.location.hash;
					// 去掉 # 号，只保留值部分
					this.xuan  = hashValue.substring(1);

					if (this.xuan == "3"){
						this.iflogin1= false;
						this.iflogin2= false;
						this.iflogin3= true;

					}
				},
				pwdlogin() {

				   this.change = true;

				},
				fanhui() {
				   this.change = false;
				},
				adminlogin() {
					if((this.password != '' || this.password != null) && this.checked){
						axios.get('/user/adminlogin?phone='+this.phone+'&password='+this.password).then(res => {
							if(res.data != 0 ){
								window.location.href = "/houtai/main.html#"+res.data;
							}
							else{
								alert("手机号或密码错误！")
							}


						});
					}
					else{
						alert("密码为空或未勾选协议！");

					}


				}
		    }
	});
	
	
	</script>
</html>
